<template>
  <div>
    <!-- 
            目标：
                利用 上午的内容 做一套 增删改查

                增：
                    表单，可以新增一条商品数据  <名称,价格,描述>
                查:
                    新增的数据是放在一个数组里面的，需要以表格的形式渲染出来
                改:
                    点击操作里面的一个按钮，把数据放到表单里面，可以进行修改
                删:
                    点击删除按钮，把对应的一条数据删掉

         -->
    <table>
      <tr>
        <th><input type="checkbox" v-model="checkAll" />全选</th>
        <th>ID</th>
        <th>商品名称</th>
        <th>商品说明</th>
        <th>价格</th>
        <th>数量</th>
        <th>操作</th>
      </tr>
      <tr v-for="item in goods" :key="item.id">
        <td>
          <input type="checkbox" v-model="item.checked" />
        </td>
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.description }}</td>
        <td>{{ item.price }}</td>
        <td>
          <button @click="addFn(item.id)">+</button>
          <input class="price" type="text" v-model="item.count" />
          <button @click="subFn(item.id)">-</button>
        </td>
        <td>
          <button @click="modify(item)">修改</button>
          <button @click="del(item.id)">删除</button>
        </td>
      </tr>
    </table>
    <div class="tatol">总计：{{ total }}</div>
    <hr />
    <!-- 注意： form 表单里面的button，默认是会走submit 的，解决方式1： 不写form ，2. 点击的时候，阻止默认行为 -->
    <form action="">
      <div class="row">
        <div class="cel">商品名称</div>
        <div class="cel">
          <input type="text" v-model="name" />
        </div>
      </div>
      <div class="row">
        <div class="cel">商品描述</div>
        <div class="cel">
          <input type="text" v-model="description" />
        </div>
      </div>
      <div class="row">
        <div class="cel">单价</div>
        <div class="cel">
          <input type="text" v-model="price" />
          <span class="tip" v-show="showTip">输入的价格不是数字</span>
        </div>
      </div>
      <div class="row">
        <div class="cel">
          <button @click.prevent="add">确定</button>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
/*
    目标1： 
        点击确定生成一个新的商品添加到表格里面
    目标2：
        点击加减增减商品数量
    目标3：
        点击删除
    目标4：
        点击修改，把对应的数据填入表单，然后点击确定，把数组里面的数据修改掉
    目标5:
        通过勾选，计算出总的价钱
    目标6：
        当输入的价格不是数字，提示用户

    思路：
        1. 点击  --> 事件  --> v-on
        2. 存储数据  --> 大量的商品 --> 数组 --> data.数组
        3. 数据结构  --> {id , name , descrition , price , 数量}
            3.1 id --> 唯一的 ， 自己定义一个变量，每次新增，让变量增加
            3.2 数量在表单里是没有数量的，所以我们所有的新增，都是默认1
            3.3 表单对应的数据，在data里面声明，然后使用 v-model 进行绑定
        4. 渲染到表格里面 --> 数组的渲染，需要 v-for

        5. 还是点击，事件
        6. 修改指定商品的数量，根据id找到对应的商品，修改其数据

        7. 还是点击，所以还是事件，v-on
        8. 把id传入方法里面，从数组中找到对应的商品删除
            找 -- 目标是删除 -- 数组.splice(索引,1) ---> 找的是索引 ---> findIndex , indexOf

        9. 点击修改，事件
        10. 把点击的数据放入表单  ---> 表单已经绑定对data里面的数据，所以我们只需要把点击的数据赋值给data里面的数据即可
        11. 点击确定，判断当前到底是新增还是修改
            11.1 可以在 data 里面记录一个状态，当前是修改还是新增
            11.2 在点击修改的时候把这个状态修改掉，在点击确定的时候，还要重置
        12. 修改数据，只要把数组里面的数据进行修改  --- 确定要修改的是谁，根据id决定 ，点击修改的时候需要提供一个可以在点击确定的时候得到的id，可以把这个id存到data上

        13. 点击checkbox
        14. 是否全选是依赖于 其实的checkbox的，别人变了影响我 -- computed

        15. 在用户输入价格不是数字的时候，我们可以提醒它
            15.1 方式1： input事件，里面判断  方式2:监听 价格，如果不是数字了，提示

 */

let id = 2;
export default {
  data() {
    return {
      goods: [
        {
          id: 1,
          name: "小熊饼干",
          description: "好吃",
          price: 9.9,
          count: 10,
          checked: false,
        },
        {
          id: 2,
          name: "五仁月饼",
          description: "非常好吃",
          price: 99.9,
          count: 2,
          checked: false,
        },
      ],
      name: "",
      description: "",
      price: 0,
      isEdit: false,
      editId: 0,
      showTip: false,
    };
  },
  methods: {
    add() {
      if (this.isEdit) {
        // 修改
        const tar = this.goods.find((item) => item.id === this.editId);
        tar.name = this.name;
        tar.description = this.description;
        tar.price = this.price;
      } else {
        // 数据验证
        id++;
        this.goods.push({
          id,
          name: this.name,
          description: this.description,
          price: this.price,
          count: 1,
        });
      }

      this.name = "";
      this.description = "";
      this.price = 0;
    },
    addFn(id) {
      // 根据id找到对应的商品，让它的数量增加
      const tar = this.goods.find((item) => item.id === id);
      tar.count++;
    },
    subFn(id) {
      const tar = this.goods.find((item) => item.id === id);
      if (tar.count <= 1) return;
      tar.count--;
    },
    del(id) {
      const idx = this.goods.findIndex((item) => item.id === id);
      this.goods.splice(idx, 1);
    },
    modify(item) {
      this.editId = item.id;
      this.name = item.name;
      this.description = item.description;
      this.price = item.price;
      //   代表当前是修改的状态
      this.isEdit = true;
    },
  },
  computed: {
    // 全选效果是依赖于 其它的商品的勾选的，所以是一个依赖于多个
    checkAll: {
      get() {
        return !this.goods.some((item) => !item.checked);
      },
      set(val) {
        this.goods.forEach((item) => (item.checked = val));
      },
    },
    total() {
      return this.goods.reduce((prev, current) => {
        // if (current.checked) {
        //   return prev + current.price * current.count;
        // } else {
        //   return prev + 0;
        // }
        return prev + (current.checked ? current.price * current.count : 0);
      }, 0);
    },
  },
  watch: {
    // 自己改变了，响应别的地方 -- watch
    price(newVal, oldVal) {
      //   console.log(newVal, oldVal);
      if (!/^\d+$/.test(newVal)) {
        this.showTip = true;
      }
    },
  },
};
</script>

<style>
table {
  width: 600px;
  margin: 0 auto;
  border: 1px solid #000;
  border-collapse: collapse;
}
td,
th {
  border: 1px solid #000;
}
.price {
  width: 40px;
}

.row {
  display: flex;
  padding: 10px;
  border-bottom: 1px solid #000;
}
.cel {
  min-width: 80px;
}
form {
  width: 400px;
  border: 1px solid #000;
  margin: 0 auto;
}
.tip {
  font-size: 12px;
  display: block;
  color: red;
}
</style>
